<!DOCTYPE html>
<html
  prefix="
    xhv: http://www.w3.org/1999/xhtml/vocab#
    xsd: http://www.w3.org/2001/XMLSchema#
    rdfs: http://www.w3.org/2000/01/rdf-schema#
    dc: http://purl.org/dc/terms/
    vcard: http://www.w3.org/2006/vcard/ns#
    v: http://rdf.data-vocabulary.org/#"
  lang="en" >
  <head>
    <title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>

    <!-- Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- Style Sheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/rdf-font/rdf-font.css">
    <style>
      /* fomantic overrides */
      html { scroll-padding-top: 5em; }
      .ui.main.container { margin-top: 7em; }
      .ui.top.menu .header.item { border: none !important; padding-left: 0; }
      .ui.top.menu .header.item > span { font-size: 150%; }
      .ui.top.menu .header.item > img { margin-right: 1rem; }
      .ui.fitted.tab.segment > .ui.table { border-left: 0; border-top: 0; border-right: 0; margin-top: 0; }
      /* RDF Font gets priority */
      i.rdf-icon-rdf.icon { font-family: 'rdf-font'; }
    </style>

    <link rel="shortcut icon" href="/favicon.ico" />

    <!-- Script tags -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-{{ ga | default: '42886053' }}-1', 'json-ld.org');
      ga('send', 'pageview');
    </script>
  </head>

  <body>
    <div class="ui top fixed menu">
      <div class="ui container">
        <!-- Brand -->
        <a class="header item" href="/">
          <img src="/images/json-ld-data-24.png" alt="JSON-LD logo">
          <span>JSON-LD</span>
        </a>

        <!-- Main menu items -->
        <a class="item {% if page.url == '/playground/' %}active{% endif %}" href="/playground/">
          <i class="beer icon"></i> Playground
        </a>

        <a class="item {% if page.url == '/learn/' %}active{% endif %}" href="/learn/">
          <i class="book icon"></i> Documentation
        </a>

        <a class="item" href="/#developers">
          <i class="flask icon"></i> Developers
        </a>

        <!-- Dropdown menu -->
        <div class="ui simple dropdown item {% if page.url == '/spec/' %}active{% endif %}">
          <i class="folder open icon"></i>
          Specifications
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="header"><strong>W3C Recommendations</strong></div>
            <a class="item" href="https://www.w3.org/TR/json-ld/">Syntax</a>
            <a class="item" href="https://www.w3.org/TR/json-ld-api/">Processing Algorithms and API</a>
            <a class="item" href="https://www.w3.org/TR/json-ld-framing/">Framing</a>

            <div class="divider"></div>

            <div class="header"><strong>Latest Drafts</strong></div>
            <a class="item" href="https://w3c.github.io/json-ld-syntax/">Syntax</a>
            <a class="item" href="https://w3c.github.io/json-ld-api/">Processing Algorithms and API</a>
            <a class="item" href="https://w3c.github.io/json-ld-framing/">Framing</a>
            <a class="item" href="https://w3c.github.io/json-ld-bp/">Best Practices</a>
            <a class="item" href="https://w3c.github.io/json-ld-streaming/">Streaming</a>
            <a class="item" href="https://json-ld.github.io/json-ld-star/">JSON-LD-star</a>
            <a class="item" href="https://w3c.github.io/json-ld-cbor/">CBOR</a>
            <a class="item" href="https://github.com/w3c/json-ld-rc/">Recommended Context</a>
            <a class="item" href="https://json-ld.github.io/yaml-ld/">YAML-LD</a>
            <a class="item" href="/spec/">1.0 drafts (historic)</a>
          </div>
        </div>

        <a class="item {% if page.url == '/images/' %}active{% endif %}" href="/images/">
          <i class="image icon"></i> Branding
        </a>
      </div>
    </div>

    <div class="ui main container">
    {{ content }}
    </div>

    <!-- Script tags -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.js"></script>
    <script>
      $('#keyboard-shortcuts').popup({ on: 'click', inline: true });
    </script>
  </body>
</html>
